<template>
  <div>
    <!-- 头部开始 -->
    <home-header />
    <!-- 头部结束 -->
    <!-- 轮播开始 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="wrap">
        <van-swipe class="home-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in banners" :key="item.id" autoplay>
            <img :src="item.picUrl" alt="" />
          </van-swipe-item>
        </van-swipe>
        <!-- 宫格导航开始 -->
        <van-grid column-num="5" class="grid" >
          <van-grid-item
            clickable
            :icon="item.icon"
            :text="item.name"
            v-for="item in cates"
            :key="item.id"
            :to="'/itemList/'+item.id"
          />
        </van-grid>
        <!-- 宫格导航结束 -->
        <!-- 商品推荐 -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <recommend :items="items" @clickItem='enterDetail' @addCartHome='addCartHome'/>
        </van-list>
      </div>
    </van-pull-refresh>
    <!-- 轮播结束 -->
    <!-- tab栏开始 -->
    <my-tabbar></my-tabbar>
    <!-- tab栏结束 -->
  </div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import { fetchCates, fetchHomeBanners, fetchItems } from '@api'
import HomeHeader from './components/HomeHeader'
import Recommend from './components/Recommend'
import { isLogin } from '@utils'
import { Toast } from 'vant' // 当做函数引入，而不是当做组件引入
// import axios from 'axios'
import Loading from '@/plugins/Loginding/login.vue'
export default {
  name: 'home', // 让组件看起来更加语义化；扩展程序下面可以渲染这个名字
  data () {
    return {
      cates: [],
      banners: [],
      items: [],
      isLoading: false, // 表示当前状态是否上拉加载，默认是不加载，只有触发的时候，才会变成true(加载)
      page: 1, // 表示当前页
      pageSize: 4, // 表示一页多少条
      finished: false, // 表示是否加载到最后一页，默认没有
      loading: false // 是否处于加载状态，默认不加载
    }
  },
  created () {
    this.fetchCates()
    this.fetchHomeBanners()
    // this.fetchItems()
  },
  methods: {
    addCartHome (item) {
      // console.log(11)
      if (!isLogin()) {
        // 没有登录
        this.$router.push('/login')
        return
      }
      this.$store.commit('cart/add_cart', item)
      Toast('已经加入购物车，赶紧加购吧')
    },
    enterDetail (id) {
      this.$router.push({
        path: '/detail',
        query: { id }
      })
    },
    onLoad () {
      this.fetchItems()
      this.page++
    },
    onRefresh () {
      this.page = 1
      this.items = []
      this.finished = false
      // 上拉刷新动作触发后，需要请求数据，并且数据请求完成后，会将下拉状态变成false
      this.fetchItems()
    },
    fetchCates () {
      fetchCates().then((res) => {
        this.loading = false
        if (res.data.code === 0) {
          // console.log(res.data.data)
          this.cates = res.data.data
        }
      })
    },
    fetchHomeBanners () {
      fetchHomeBanners().then((res) => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    fetchItems () {
      fetchItems({
        categoryId: 228796,
        // 根据接口列表中的数据，有page和pageSize
        page: this.page,
        pageSize: this.pageSize
      }).then((res) => {
        this.isLoading = false
        this.loading = false
        if (res.data.code === 0) {
          // console.log(res.data)
          // this.items = res.data.data
          this.items = [...this.items, ...res.data.data]
        }
        // console.log(res.data.code)
        if (res.data.code === 700) {
          // 请求的数据到最后一条了
          this.finished = true // 不再触发加载事件
          // console.log(1)
        }
      })
    }
  },
  components: {
    MyTabbar,
    HomeHeader,
    Recommend
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  padding: 50px 0;
  .home-swipe img {
    width: 100%;
  }
  .grid {
    margin: 10px;
    .van-grid-item:nth-child(-n + 5) {
      font-weight: bold;
    }
  }
}
</style>
